<template>
  <div>
    <div class="login" v-if="!isLogin">
      <h1>模拟登录：</h1>
      <div>
        <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
          <el-form-item prop="nickName">
            <el-input v-model="param.nickName" placeholder="用户昵称">
              <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item prop="id">
            <el-input type="id" placeholder="ID" v-model="param.id">
              <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm()">登录</el-button>
          </div>
          <p class="login-tips"></p>
        </el-form>
      </div>
    </div>
    <div class="home" v-else>
        <Home></Home>
      </div>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  components: {
    Home
  },
  data() {
    return {
        isLogin:false,
      param: {
        nickName: "",
        id: ""
      },
      rules: {
        nickName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        id: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.login.validate(valid => {
        //判断表单信息是否填写真确
        if (valid) {
          this.$message.success("登录成功");
          localStorage.setItem("userName", this.param.nickName);
          localStorage.setItem("userId", this.param.id);

          this.$websocket.Init(this.param.id);
          this.isLogin = true;
        } else {
          this.$message.error("请输入账号和密码");
          return false;
        }
      });
    }
  }
};
</script>